<script setup>
import { computed, onMounted, onBeforeUnmount } from 'vue'
import FolderPanel from './FolderPanel.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  file: {
    type: Object,
    default: null
  },
  mediaFiles: {
    type: Array,
    default: () => []
  },
  targetFolder: {
    type: String,
    default: ''
  },
  selectedTargetPath: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:visible', 'target-select', 'target-path-select', 'move-file', 'file-change'])

// 计算属性处理对话框可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 获取当前文件索引
const currentIndex = computed(() => {
  return props.mediaFiles.findIndex(f => f.path === props.file?.path)
})

// 是否有上一个文件
const hasPrev = computed(() => currentIndex.value > 0)

// 是否有下一个文件
const hasNext = computed(() => currentIndex.value < props.mediaFiles.length - 1)

// 获取媒体URL
const getMediaUrl = (path) => {
  if (!path) return ''
  const normalizedPath = path.replace(/\\/g, '/')
  const cleanPath = normalizedPath.replace(/^\/+/, '')
  return `media://${cleanPath}`
}

// 切换到上一个文件
const handlePrev = () => {
  if (hasPrev.value) {
    emit('file-change', props.mediaFiles[currentIndex.value - 1])
  }
}

// 切换到下一个文件
const handleNext = () => {
  if (hasNext.value) {
    emit('file-change', props.mediaFiles[currentIndex.value + 1])
  }
}

// 移动当前文件
const handleMove = () => {
  if (props.file && props.selectedTargetPath) {
    // 在移动文件之前先获取下一个文件
    const nextFile = hasNext.value ? props.mediaFiles[currentIndex.value + 1] : null
    
    // 发出移动文件事件
    emit('move-file', props.file)
    
    // 如果有下一个文件，切换到下一个文件
    if (nextFile) {
      setTimeout(() => {
        emit('file-change', nextFile)
      }, 0)
    } else {
      // 如果没有下一个文件，关闭对话框
      handleClose()
    }
  }
}

// 关闭对话框时停止视频播放
const handleClose = () => {
  const video = document.querySelector('.video-player')
  if (video) {
    video.pause()
    video.currentTime = 0
  }
  emit('update:visible', false)
}

// 添加键盘事件处理函数
const handleKeyPress = (event) => {
  // 只有当对话框可见时才处理键盘事件
  if (!props.visible) return
  
  switch (event.key) {
    case 'ArrowLeft':
      if (hasPrev.value) {
        handlePrev()
      }
      break
    case 'ArrowRight':
      if (hasNext.value) {
        handleNext()
      }
      break
    case 'Enter':
      if (props.selectedTargetPath) {
        handleMove()
      }
      break
  }
}

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('keydown', handleKeyPress)
})

// 组件卸载前移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyPress)
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="file?.name"
    width="65%"
    :before-close="handleClose"
    destroy-on-close
    align-center
    class="video-dialog"
    :modal-class="'custom-dialog-modal'"
  >
    <div class="dialog-content">
      <!-- 视频播放区域 -->
      <div class="video-section">
        <!-- 上一个按钮 -->
        <div 
          v-if="hasPrev" 
          class="nav-button prev"
          @click="handlePrev"
        >
          <el-icon><ArrowLeft /></el-icon>
        </div>

        <!-- 视频容器 -->
        <div class="video-container">
          <video
            v-if="file"
            class="video-player"
            :src="getMediaUrl(file.path)"
            controls
            autoplay
          >
            您的浏览器不支持 HTML5 视频播放
          </video>
        </div>

        <!-- 下一个按钮 -->
        <div 
          v-if="hasNext" 
          class="nav-button next"
          @click="handleNext"
        >
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- 目标文件夹面板 -->
      <div class="folder-section">
        <FolderPanel
          :folder="targetFolder"
          :selected-path="selectedTargetPath"
          @select="path => emit('target-select', path)"
          @path-select="path => emit('target-path-select', path)"
        />
        <div class="move-actions">
          <el-button 
            type="primary" 
            :disabled="!selectedTargetPath"
            @click="handleMove"
          >
            移动到选中文件夹
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
/* 自定义遮罩层样式 */
:deep(.custom-dialog-modal) {
  background-color: rgba(0, 0, 0, 0.7);
}

.video-dialog :deep(.el-dialog) {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  height: 70vh;
  margin: 10vh auto !important;
  overflow: hidden;
}

.video-dialog :deep(.el-dialog__body) {
  flex: 1;
  overflow: hidden;
  padding: 0;
  height: calc(100% - 41px); /* 减去标题栏高度 */
}

.dialog-content {
  display: flex;
  height: 100%;
  gap: 16px;
  padding: 16px 16px 16px 16px;
}

.video-section {
  flex: 0.75;
  position: relative;
  display: flex;
  align-items: center;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
  max-height: calc(80vh - 41px);
}

.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 1;
  font-size: 18px;
}

.nav-button:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.nav-button.prev {
  left: 20px;
}

.nav-button.next {
  right: 20px;
}

.folder-section {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f5f7fa;
  border-left: 1px solid #eee;
  height: calc(80vh - 41px);
  overflow-y: auto;
  margin-right: -16px;
}

.move-actions {
  padding: 10px;
  border-top: 1px solid #eee;
  text-align: center;
}

.move-actions :deep(.el-button) {
  font-size: 13px;
  padding: 8px 16px;
}

:deep(.el-dialog__header) {
  padding: 8px 12px;
  margin: 0;
  border-bottom: 1px solid #eee;
  height: 41px;
  box-sizing: border-box;
}

:deep(.el-dialog__title) {
  font-size: 14px;
  line-height: 24px;
}
</style> 